<template>
	<el-container class="bg-white rounded" :style="{ height:(h + 'px') }">
	      <el-header class="image-header">
			<el-button type="primary" size="small"@click="handleOpenCreate">新增图片分类
			</el-button>
			<el-button type="warning" size="small"@click="handleOpenUpload">上传图片
			</el-button>
		  </el-header>
	      <el-container>
	        <ImageAside ref="ImageAsideRef" @change="hadleAsideChange"/>
			
	        <ImageMain ref="ImageMainRef"/>
	      </el-container>
	</el-container>
</template>

<script setup>
	import { ref } from 'vue'
	import ImageAside from '../../components/ImageAside.vue';
	import ImageMain from '../../components/ImageMain.vue';
	
	const ImageAsideRef = ref(null)
	const handleOpenCreate =()=> ImageAsideRef.value.handleCreate()
	const windowHeight = window.innerHeight || document.body.clientHeight
	const h = windowHeight - 64 - 44 - 40
	
	const ImageMainRef = ref(null)
	const hadleAsideChange = (image_class_id) =>ImageMainRef.value.loadData(image_class_id)
	
	const handleOpenUpload = ()=>ImageMainRef.value.openUploadFile()
</script>

<style scoped>
	.bg-white{
		background-color: white;
	}
	.image-header{
		border-bottom: 1px solid lightgray;
		display: flex;
		align-items: center;
	}
</style>